<template>
    <div id="app">
      <div id="searchConditions">
        <el-row :gutter="20">
        	<el-col :span="6">
            	<el-input v-model="t.name" placeholder="姓名"></el-input>
            </el-col>
            <el-col :span="6">
                <el-input v-model="t.code" placeholder="工号"></el-input>
            </el-col>
            </el-row>
            <br>
            <el-row :gutter="20">
	            <el-col :span="6">
	            	<el-select v-model="t.department_code" placeholder="请选择部门">
	                	<el-option v-for="option in bmOptions" :key="option.value" :value="option.value" :label="option.label"></el-option>
	                </el-select>
	            </el-col>
	            <el-col :span="6">
	            	<el-select v-model="t.gender" placeholder="请选择性别">
	                	<el-option :key="3" value="" label="性别:全部"></el-option>
	                    <el-option :key="0" :value="1" label="男"></el-option>
	                    <el-option :key="1" :value="2" label="女"></el-option>
	              </el-select>
	            </el-col>
              <el-col :span="6">
	            	<el-select v-model="t.teacher_type_code" placeholder="请选择教师类型">
	                	<el-option :key="3" value="" label="教师类型:全部"></el-option>
	                    <el-option :key="0" :value="1" label="校聘"></el-option>
	                    <el-option :key="1" :value="2" label="院聘"></el-option>
                      <el-option :key="2" :value="3" label="外校教师"></el-option>
	                </el-select>
	            </el-col>
	        </el-row>
	     <br>
        <el-row style="text-align: center;margin-top:20px;">
            <el-col :span="24" size="large">
                <el-button @click="search" type="primary" size="large ">查询</el-button>
            </el-col>
        </el-row>
    </div>
    <div style="padding: 20px;text-align: left">
        <el-button-group>
			    <el-button @click="dialogFormVisible = true" type="primary">审核校外教师</el-button>
			    <el-button type="primary" @click="importData">导入校外教师</el-button>
          <el-button type="primary" :loading="loading" @click="SynTeacher">同步校内教师信息</el-button>
        </el-button-group>
    </div>
        <el-table :data="teachers.item" v-loading="loading2"
          style="width:100%" @selection-change="handleSelectionChange">
            <el-table-column type="selection">
            </el-table-column>
            <el-table-column prop="NAME" align="center" label="姓名">
              <template slot-scope="scope">
                <el-popover trigger="hover" placement="top">
                  <P>姓名：{{scope.row.NAME}}</P>
                  <P>工号/证件号：{{scope.row.CODE}}</P>
                  <p>部门：{{scope.row.DEPARTMENT_NAME}}</p>
                  <p>性别：{{scope.row.GENDER}}</p>
                  <p>年龄：{{scope.row.AGE}}</p>
                  <p>教师类型：{{scope.row.TEACHER_TYPE}}</p>
                  <p>手机号：{{scope.row.MOBILE_PHONE}}</p>
                  <p>邮箱：{{scope.row.EMAIL}}</p>
                  <div slot="reference" class="name-wrapper">
                    <el-tag size="medium">{{scope.row.NAME}}</el-tag>
                  </div>
                </el-popover>
              </template>
            </el-table-column>
            <el-table-column prop="CODE" align="center" label="工号">
            </el-table-column>
            <el-table-column prop="STATUS" align="center" label="状态">
              <template slot-scope="scope">
                <el-tag :type="scope.row.STATUS == 1 ? 'success' : scope.row.STATUS == 0 ? 'error' : 'danger' " close-transition>
                  {{scope.row.STATUS== 1 ? "激活": scope.row.STATUS == 0 ? "未激活": "待审批"}}
                </el-tag>
              </template>
            </el-table-column>
            <el-table-column prop="GENDER" align="center" label="性别">
            </el-table-column>
            <el-table-column prop="AGE" align="center" label="年龄">
            </el-table-column>
            <el-table-column prop="DEPARTMENT_NAME" align="center" label="部门">
            </el-table-column>
            <el-table-column prop="TEACHER_TYPE" align="center" label="教师类型">
            </el-table-column>
        </el-table>
        <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="teachers.pageNumber"
            :page-sizes="[20, 30, 50, 100]"
            :page-size="teachers.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="teachers.total">
        </el-pagination>
        <el-dialog title="编辑教师信息" :visible.sync="dialogFormVisible">
	        <el-form :model="tt" label-width="90px">
				    <el-input type="hidden" v-model="tt.id" auto-complete="off" :disabled="true"></el-input>
			      <el-form-item label="工号/证件号">
				      <el-input type="text" v-model="tt.code" auto-complete="off" :disabled="true"></el-input>
			      </el-form-item>
            <el-form-item label="姓名">
				      <el-input type="text" v-model="tt.name" auto-complete="off"></el-input>
			      </el-form-item>
            <el-form-item label="状态">
              <el-select v-model="tt.status" placeholder="请选择状态">
                <el-option label="激活" value="1"></el-option>
                <el-option label="未激活" value="0"></el-option>
                <el-option label="待审核" value="2"></el-option>
              </el-select>
            </el-form-item>
		      </el-form>
		      <div slot="footer" class="dialog-footer">
			      <el-button @click="dialogFormVisible = false">取 消</el-button>
			      <el-button type="primary" @click="editTeacherInfo">确 定</el-button>
		      </div>
	      </el-dialog>
        <!-- <el-dialog title="校外教师导入" :visible.sync="dialogImportVisible" :modal-append-to-body="false" :close-on-click-modal="false" class="dialog-import">
          <div>
			        <form class="upload" action="/api/exam/com.primeton.eos.uploadFile.flow"
                method="post" enctype="multipart/form-data">
                <input type="file" name="file" />
                <input type="submit" value="提交" />
                <div slot="tip">上传校外教师(只能上传.xls文件)</div>
			        <div slot="tip">
				        <a href="./static/template/teacherTemplate.xls">下载文件模版</a>
			        </div>
              </form>
          </div>
        </el-dialog> -->
        <el-dialog title="校外教师导入" :visible.sync="dialogImportVisible" :modal-append-to-body="false" :close-on-click-modal="false" class="dialog-import">
          <div>
            <form class="upload" method="post" enctype="multipart/form-data">
                <input type="file" @change="getFile($event)">
                <el-button type="primary" size="small" :disabled="processing" @click="submit($event)">{{uploadTip}}</el-button>
                <div slot="tip">上传校外教师(只能上传.xls文件)</div>
                <div slot="tip">
                  <a href="./static/template/teacherTemplate.xls">下载文件模版</a>
                </div>
            </form>
          </div>
        </el-dialog>
    </div>
</template>
<script>
    import { getTeachers, getTeachersWithFilter, updateTeacher, synTeacher } from '@/api/basicInfoSetting'
    import _ from 'lodash'
    import axios from 'axios'
    export default {
      name: 'teacherSetting',
      data() {
        return {
          teachers: {
            total: 0,
            pageNumber: 1,
            pageSize: 20,
            item: []
          },
          loading: false,
          loading2: false,
          multipleSelection: [],
          dialogFormVisible: false,
          dialogImportVisible: false,
          uploadTip: '点击上传',
          uploadData: {
            filename: 'customer.xls'
          },
          processing: false,
          name: 'import',
          importUrl: '/api/exam/com.primeton.eos.uploadFile.flow',
          currentPageNumber: 1,
          t: {
            code: '',
            name: '',
            department_name: '',
            department_code: '',
            gender: '',
            teacher_type_code: ''
          },
          tt: {
            id: '',
            code: '',
            name: '',
            gender: '',
            birthday: '',
            status: '',
            teacher_type: ''
          },
          bmOptions: [{ value: '', label: '部门:全部' }, { value: '101', label: '会计学院' },
            { value: '102', label: '金融学院' },
            { value: '104', label: '经济学院' },
            { value: '105', label: '法学院' },
            { value: '106', label: '公共经济与管理学院' },
            { value: '107', label: '人文学院' },
            { value: '108', label: '信息管理与工程学院' },
            { value: '109', label: '外国语学院' },
            { value: '110', label: '统计与管理学院' },
            { value: '111', label: '数学学院' },
            { value: '112', label: '体育教育部' },
            { value: '113', label: '继续教育学院' },
            { value: '115', label: '国际文化交流学院' },
            { value: '123', label: '国际教育学院' },
            { value: '125', label: '马克思主义学院' },
            { value: '126', label: '创业学院' },
            { value: '127', label: '商学院' },
            { value: '200', label: '校行政领导' },
            { value: '201', label: '两办' },
            { value: '204', label: '纪监处（纪委、监察处合署）' },
            { value: '206', label: '审计处' },
            { value: '207', label: '组织部' },
            { value: '208', label: '宣传部' },
            { value: '209', label: '统战部' },
            { value: '210', label: '党校' },
            { value: '211', label: '研究室' },
            { value: '212', label: '人事处' },
            { value: '213', label: '国际处' },
            { value: '214', label: '教务处' },
            { value: '215', label: '学生处' },
            { value: '216', label: '研究生院' },
            { value: '217', label: '科研处' },
            { value: '218', label: '发展规划处' },
            { value: '219', label: '信息化办公室' },
            { value: '220', label: '财务处' },
            { value: '222', label: '离退休处' },
            { value: '223', label: '后勤管理处' },
            { value: '224', label: '基本建设处' },
            { value: '225', label: '保卫处' },
            { value: '226', label: '工会' },
            { value: '227', label: '妇联' },
            { value: '228', label: '团委' },
            { value: '231', label: '现代服务产业园区办公室' },
            { value: '234', label: '资产管理处' },
            { value: '302', label: '高等研究院' },
            { value: '321', label: '公共政策与治理研究院' },
            { value: '341', label: '财经研究所' },
            { value: '353', label: '高等教育研究所' },
            { value: '358', label: '上海市金融信息技术研究重点实验室' },
            { value: '359', label: '中国公共财政研究院' },
            { value: '361', label: '上海发展研究院' },
            { value: '368', label: '三农研究院' },
            { value: '401', label: '档案馆' },
            { value: '402', label: '图书馆' },
            { value: '403', label: '教育技术中心' },
            { value: '404', label: '就业指导中心' },
            { value: '405', label: '出版社' },
            { value: '406', label: '期刊社' },
            { value: '407', label: '合作发展处' },
            { value: '408', label: '医疗健康服务中心' },
            { value: '409', label: '实验中心' },
            { value: '500', label: '校党委领导' },
            { value: '901', label: '上财后勤实业中心' },
            { value: '909', label: '博士后流动站' },
            { value: '-1', label: '外校教师' }
          ]
        }
      },
      mounted: function() {
        this.loading2 = true
        const param = {
          'pageSize': this.teachers.pageSize,
          'pageNumber': this.teachers.pageNumber
        }
        getTeachers(param.pageSize, param.pageNumber).then(response => {
          const data = response.result
          // console.log(data)
          this.teachers.item = data
          this.teachers.total = response.totalRows
          this.loading2 = false
        }).catch(error => {
          this.loading2 = false
          console.log(error)
        })
      },
      methods: {
        getFile() {
          this.file = event.target.files[0]
          this.beforeUpload(this.file)
          // console.log(this.file)
        },
        beforeUpload(file, fileList) {
        // 上传前配置
          const excelfileExtend = '.xls, .xlsx'// 设置文件格式
          const fileExtend = file.name.substring(file.name.lastIndexOf('.')).toLowerCase()
          if (excelfileExtend.indexOf(fileExtend) <= -1) {
            this.$message.error('文件格式错误')
            return false
          }
        },
        submit: function(event) {
          event.preventDefault()
          this.uploadTip = '正在上传中...'
          this.processing = true
          const formData = new FormData()
          formData.append('file', this.file)
          axios.post('/api/xwTeacher/import', formData).then(response => {
            this.$message.success(response.data.message)
            this.refetchCurrentPage()
            this.uploadTip = '提交'
            this.processing = false
          }).catch(error => {
            console.log(error)
            this.$message.error('文件上传失败')
            this.uploadTip = '提交'
            this.processing = false
          })
        },
        handleSizeChange: function(val) {
          this.loading2 = true
          const param = {
            'pageSize': val,
            'pageNumber': this.teachers.pageNumber,
            'teacher_code': this.t.code,
            'name': this.t.name,
            'department_code': this.t.department_code,
            'gender': this.t.gender,
            'teacher_type_code': this.t.teacher_type_code
          }
          getTeachersWithFilter(param.pageSize, param.pageNumber, param.teacher_code, param.name, param.department_code, param.gender, param.teacher_type_code).then(response => {
            const data = response.result
            // console.log(data)
            this.teachers.item = data
            this.teachers.total = response.totalRows
            this.loading2 = false
          }).catch(error => {
            this.loading2 = false
            console.log(error)
          })
        },
        handleCurrentChange: function(val) {
          this.loading2 = true
          this.currentPageNumber = val
          const param = {
            'pageSize': this.teachers.pageSize,
            'pageNumber': val,
            'teacher_code': this.t.code,
            'name': this.t.name,
            'department_code': this.t.department_code,
            'gender': this.t.gender,
            'teacher_type_code': this.t.teacher_type_code
          }
          getTeachersWithFilter(param.pageSize, param.pageNumber, param.teacher_code, param.name, param.department_code, param.gender, param.teacher_type_code).then(response => {
            const data = response.result
            this.teachers.item = data
            this.teachers.total = response.totalRows
            this.teachers.pageNumber = val
            this.teachers.pageSize = param.pageSize
            this.loading2 = false
          }).catch(error => {
            this.loading2 = false
            console.log(error)
          })
        },
        handleSelectionChange: function(val) {
          const that = this
          that.multipleSelection = []
          _.each(val, function(value, key) {
            that.multipleSelection.push(value.CODE)
            that.id = value.ID
            that.tt.code = value.CODE
            that.tt.name = value.NAME
            that.tt.teacher_type = value.TEACHER_TYPE
            that.gender = 1
          })
        },
        search: function() {
          this.loading2 = true
          // console.log('this.teachers.pageNumber:' + this.teachers.pageNumber)
          const param = {
            'pageSize': 20,
            'pageNumber': 1,
            'teacher_code': this.t.code,
            'name': this.t.name,
            'department_code': this.t.department_code,
            'gender': this.t.gender,
            'teacher_type_code': this.t.teacher_type_code
          }
          this.currentPageNumber = 1
          getTeachersWithFilter(param.pageSize, param.pageNumber, param.teacher_code, param.name, param.department_code, param.gender, param.teacher_type_code).then(response => {
            const data = response.result
            this.teachers.item = data
            this.teachers.total = response.totalRows
            this.teachers.pageNumber = 1
            this.teachers.pageSize = 20
            _.each(data, function(value) {
              value.checked = false
            })
            this.loading2 = false
          }).catch(error => {
            this.loading2 = false
            console.log(error)
          })
        },
        editTeacherInfo: function() {
          if (this.multipleSelection.length < 1) {
            this.$message({
              message: '未选中任何数据',
              type: 'warning',
              duration: 3000
            })
            return
          } else if (this.multipleSelection.length > 1) {
            this.$message({
              message: '您选择了多个老师，一次只能编辑一个老师哦！',
              type: 'warning',
              duration: 3000
            })
            return
          }
          const that = this
          that.loading2 = true
          const param = {
            'id': that.tt.id,
            'teacher_code': that.tt.code,
            'name': that.tt.name,
            'status': that.tt.status,
            'teacher_type': that.tt.teacher_type
          }
          if (param.teacher_type !== '外校教师') {
            that.$message.error('只能审核校外教师')
            that.loading2 = false
            return
          }
          updateTeacher(param.id, param.teacher_code, param.name, param.status).then(response => {
            that.dialogFormVisible = false
            that.loading2 = false
            that.refetchCurrentPage()
          }).catch(error => {
            that.loading2 = false
            console.log(error)
            that.$message.error('更新失败')
          })
        },
        SynTeacher: function() {
          const that = this
          that.loading = true
          synTeacher().then(response => {
            that.loading = false
            that.$message({
              message: response.message + ' 新增教师：' + response.insertRows + '人',
              type: 'success',
              duration: 5000
            })
            this.refetchCurrentPage()
          }).catch(error => {
            that.loading = false
            console.log(error)
            that.$message({
              message: '数据同步失败',
              type: 'error',
              duration: 3000
            })
          })
        },
        importData: function() {
          this.dialogImportVisible = true
        },
        formatDate: function(date) {
          const y = date.getFullYear()
          let m = date.getMonth() + 1
          m = m < 10 ? ('0' + m) : m
          let d = date.getDate()
          d = d < 10 ? ('0' + d) : d
          return y + '-' + m + '-' + d
        },
        refetchCurrentPage: function() {
          this.loading2 = true
          // console.log(this.teachers)
          const param = {
            'pageSize': this.teachers.pageSize,
            'pageNumber': this.currentPageNumber,
            'teacher_code': this.t.code,
            'name': this.t.name,
            'department_code': this.t.department_code,
            'gender': this.t.gender,
            'teacher_type_code': this.t.teacher_type_code
          }
          getTeachersWithFilter(param.pageSize, param.pageNumber, param.teacher_code, param.name, param.department_code, param.gender, param.teacher_type_code).then(response => {
            const data = response.result
            // console.log(data)
            this.teachers.item = data
            this.teachers.total = response.totalRows
            _.each(data, function(value) {
              value.checked = false
            })
            this.loading2 = false
          }).catch(error => {
            this.loading = false
            console.log(error)
          })
        },
        handlePreview(file, fileList) {
          console.log(file)
        },
        handleRemove(file, fileList) {
          console.log(file)
        },
        handleChange: function(file, fileList) {
          // console.log(document.getElementById('filename'))
          const iframe = document.createElement('iframe')
          iframe.style.display = 'none'
          iframe.src = file.url.replace('blob:', '')
          iframe.onload = function() {
            document.body.removeChild(iframe)
          }
          document.body.appendChild(iframe)
        },
        handleClose: function() {
          console.log('handleClose')
        },
        uploadFail(err, file, fileList) {
          this.uploadTip = '提交'
          this.processing = false
          this.$message.error(err)
        },
        uploadSuccess(response, file, fileList) {
          this.uploadTip = '提交'
          // console.log(response)
          if (response.exception) {
            this.processing = false
            this.$message.error(response.exception.message)
            return
          }
          this.processing = false
          if (response.code === '2000') {
            this.$message({
              message: response.message,
              type: 'success',
              duration: 3000
            })
          } else {
            this.$message({
              message: response.message,
              type: 'error',
              duration: 3000
            })
          }
        }
      }
    }
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
  #app {
        margin: 50px;
    }
  #searchConditions{
        border:1px solid;
        padding:10px;
    }
  table {
        font-size:12px;
        line-height:10px;
    }
  .upload {
        border:1px solid;
        margin:50px;
        padding:20px;
    }
</style>

<style rel="stylesheet/scss" lang="scss">
 a:-webkit-any-link {
    color: -webkit-link;
    cursor: pointer;
    text-decoration: underline;
}
</style>